import React, { Component } from "react";
import { Form, Input, Button, Row, Col, Divider } from "antd";
import { UserOutlined, LockOutlined } from "@ant-design/icons";
export default class Register extends Component {
  onFinish = (values) => {
    console.log("Received values of form: ", values);
  };
  render() {
    return (
      <Form
        name="normal_login"
        className="login-form"
        initialValues={{
          remember: true,
        }}
        onFinish={this.onFinish}
      >
        <Form.Item
          name="username"
          rules={[
            {
              required: true,
              message: "Please input your Username!",
            },
          ]}
        >
          <Input
            prefix={<UserOutlined className="site-form-item-icon" />}
            placeholder="Username"
          />
        </Form.Item>
        <Form.Item
          name="password"
          rules={[
            {
              required: true,
              message: "Please input your password!",
            },
          ]}
        >
          <Input
            prefix={<LockOutlined className="site-form-item-icon" />}
            placeholder="password"
          />
        </Form.Item>
        <Form.Item
          name="passwords"
          rules={[
            {
              required: true,
              message: "Please input your passwords!",
            },
          ]}
        >
          <Input
            prefix={<LockOutlined className="site-form-item-icon" />}
            placeholder="passwords"
          />
        </Form.Item>
        <Form.Item
          name="code"
          rules={[
            {
              required: true,
              message: "Please input your code!",
            },
          ]}
        >
          <Row gutter={13}>
            <Col span={15}>
              <Input
                prefix={<LockOutlined className="site-form-item-icon" />}
                placeholder="code"
              />
            </Col>
            <Col span={9}>
              <Button type="danger" block>
                获取验证码
              </Button>
            </Col>
          </Row>
        </Form.Item>
        <Form.Item>
          <Button
            type="primary"
            htmlType="submit"
            className="login-form-button"
            block
          >
            注册账号
          </Button>
        </Form.Item>
      </Form>
    );
  }
}
